<div id="header_app">
    <div class="w3ls-header">
        <div class="w3ls-header-left">
            <p>
                <a href="#"><img style="position: relative;left: -10px; top: -1px" src="./images/shopping.png">
                    XB全新高端购物平台
                </a>
            </p>
        </div>
        <div class="w3ls-header-right" id="header_user">
            <ul>
                <li class="dropdown head-dpdn">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-user" aria-hidden="true"></i>{{username}}<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="profile.html">个人中心</a></li>
                        <li><a href="/logout" @click="logout">注销</a></li>
                    </ul>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="car.html" class="dropdown-toggle"><i class="fa fa-gift" aria-hidden="true"></i>购物车</a>
                </li>
                <li class="dropdown head-dpdn">
                    <a href="waitPay.html" class="dropdown-toggle"><i class="fa fa-credit-card-alt"
                                                                      aria-hidden="true"></i>待支付</a>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="header-two">
        <div class="container">
            <div class="header-logo">
                <h1><a href="home.html"><span>X</span>Biao </a></h1>
                <h6>Your stores. Your place.</h6>
            </div>
            <div class="header-search">
                <form action="#" method="post">
                    <input type="search" name="Search" placeholder="Search for a Product..." required="" v-model="title">
                    <button type="button" class="btn btn-default" aria-label="Left Align" @click="saveKeywords">
                        <i class="fa fa-search" aria-hidden="true"> </i>
                    </button>
                </form>
            </div>
            <div class="header-cart">
                <div class="my-account">
                    <a href="javascript:;"></a>
                </div>
                <div class="cart">
                    <a href="car.html">
                        <button class="w3view-cart" type="submit" name="submit" value=""><i
                                class="fa fa-cart-arrow-down" aria-hidden="true"></i></button>
                    </a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="header-three">
        <div class="container">
            <ul class="nav nav-pills nav-justified">
                <li v-for="n in navs">
                    <a :href="n.navUrl">{{n.title}}</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    let h_v = new Vue({
        el:'#header_app',
        data:{
            username:'',
            navs:[],
            title:''
        },
        methods:{
            logout:function (){
                //清掉session和cookie的值
                $.removeCookie("userId",{path: "/"});
                 localStorage.removeItem("username");
                 localStorage.removeItem("userId");
            },
            initNav:function (){
                axios(`/initNav`)
                    .then(rsp=>{
                        if (rsp.data.flag){
                            this.navs = rsp.data.data;
                        }
                }).catch(error=>{
                    layer.msg(error.message);
                })
            },
            saveKeywords:function (){
                localStorage.setItem("title",this.title);
                location.href='/productList.html'
            }
        },
        created:function (){
            this.username =  localStorage.getItem("username");
            this.initNav();
        }
    })
</script>